<template>
  <el-dialog title="" center width="1200px" :visible.sync="visible" @close="cancel">
    <div v-loading="loading">
      <main-title title="出运单基本信息" />
      <el-form :model="info" disabled label-width="84px">
        <el-row :gutter="60">
          <el-col :span="8" :offset="0">
            <el-form-item label="出运单号">
              <el-input v-model="info.code" />
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="0">
            <el-form-item label="运输方式">
              <el-select v-model="info.shipment" disabled class="wfull">
                <el-option v-for="item in issignContract" :key="item.id" :label="item.dict_data_name" :value="`${item.id}`" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="0">
            <el-form-item label="起运港">
              <el-select v-model="info.shipment_port" disabled class="wfull">
                <el-option v-for="item in departureData" :key="item.id" :label="item.dict_data_name" :value="`${item.id}`" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="0">
            <el-form-item label="目的港">
              <el-select v-model="info.destination_port" disabled class="wfull">
                <el-option v-for="item in destineData" :key="item.id" :label="item.dict_data_name" :value="`${item.id}`" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="0">
            <el-form-item label="拼柜类型">
              <el-select v-model="info.lcl_type" disabled class="wfull">
                <el-option v-for="item in cabinetData" :key="item.id" :label="item.dict_data_name" :value="`${item.id}`" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="0">
            <el-form-item label="柜号">
              <el-input v-model="info.cabinet_no" />
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="0">
            <el-form-item label="柜型">
              <el-select v-model="info.cabinet_type" disabled class="wfull">
                <el-option v-for="item in cabinetList" :key="item.id" :label="item.dict_data_name" :value="`${item.id}`" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="0">
            <el-form-item label="封箱号">
              <el-input v-model="info.seal_no" />
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="0">
            <el-form-item label="船名航次">
              <el-input v-model="info.ships_name" />
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="0">
            <el-form-item label="货代">
              <el-select v-model="info.lforwarder_company" class="wfull">
                <el-option v-for="item in freightList" :key="item.id" :label="item.name" :value="`${item.id}`" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="0">
            <el-form-item label="装柜日期">
              <el-input v-model="info.loading_date" />
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="0">
            <el-form-item label="起运日期">
              <el-input v-model="info.shipment_date" />
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="0">
            <el-form-item label="预计到仓日期">
              <el-input v-model="info.arrive_date" />
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="0">
            <el-form-item label="提单号">
              <el-input v-model="info.bl_no" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="建议实体仓">
              <el-input v-model.trim="info.entity_warehouse" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="0">
            <el-form-item label="备注">
              <el-input v-model="info.notes" />
            </el-form-item>
          </el-col>
        </el-row>
        <main-title title="转运商品明细信息" />
        <el-table :data="info.products" border max-height="190" class="mb24">
          <el-table-column prop="purchase_order_code" label="采购申请单号" width="180" align="center" />
          <el-table-column prop="contract_code" label="合同号" width="180" align="center" />
          <el-table-column prop="goods_code" label="系统sku" width="180" align="center" />
          <el-table-column prop="number" label="采购数量" width="180" align="center" />
          <el-table-column label="转运数量" prop="trans_number" width="200" align="center" />
          <el-table-column label="转运金额" width="180" align="center">
            <template slot-scope="scope">
              <p v-if="scope.row.trans_number">{{ $computed.accMul(scope.row.trans_number, scope.row.price) }}</p>
            </template>
          </el-table-column>
          <el-table-column label="未转运数量" width="180" align="center">
            <template slot-scope="scope">
              <p v-if="scope.row.trans_number">{{ scope.row.number - scope.row.trans_number > 0 ? scope.row.number - scope.row.trans_number : 0 }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="arrive_date" label="交货日期" width="180" align="center">
            <template slot-scope="scope">
              {{ scope.row.arrive_date | formatDate('{y}-{m}-{d}') }}
            </template>
          </el-table-column>
          <el-table-column prop="goods_name" label="中文名称" width="180" align="center" />
          <el-table-column prop="goods_name_en" label="英文名称" width="180" align="center" />
          <el-table-column prop="container_rate" label="箱率" width="180" align="center" />
          <el-table-column prop="notes" label="备注" width="200" align="center" />
        </el-table>
        <main-title title="转运配件明细信息" />
        <el-table :data="info.parts" border max-height="190" class="mb24">
          <el-table-column prop="purchase_order_code" label="采购申请单号" width="180" align="center" />
          <el-table-column prop="contract_code" label="合同号" width="180" align="center" />
          <el-table-column prop="goods_code" label="系统sku" width="180" align="center" />
          <el-table-column prop="number" label="采购数量" width="180" align="center" />
          <el-table-column label="转运数量" prop="trans_number" width="200" align="center" />
          <el-table-column prop="arrive_date" label="交货日期" width="180" align="center">
            <template slot-scope="scope">
              {{ scope.row.arrive_date | formatDate('{y}-{m}-{d}') }}
            </template>
          </el-table-column>
          <el-table-column prop="goods_name" label="中文名称" width="180" align="center" />
          <el-table-column prop="container_rate" label="箱率" width="180" align="center" />
          <el-table-column prop="notes" label="备注" width="200" align="center" />
        </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer-center">
        <span>
          <el-button type="primary" @click="cancel">返回</el-button>
        </span>
      </div>
    </div>
  </el-dialog>

</template>

<script>
import mainTitle from '@/components/mainTilte/mainTilte'
export default {
  name: 'WaybillInfoDialog',
  components: {
    mainTitle
  },
  data() {
    return {
      id: '',
      visible: false,
      info: {}, // 详情
      loading: false,

      issignContract: [],
      departureData: [],
      destineData: [],
      cabinetData: [],
      cabinetList: [],
      freightList: []
    }
  },
  computed: {},
  created() {
    this.getDic() // 获取字典
    this.getFreightList()
  },
  methods: {
    // 获取货代列表
    getFreightList() {
      const vm = this
      const params = {
        page: 1,
        limit: 100000000
      }
      vm.$http.get('/lforwarder', { params }).then(res => {
        vm.freightList = res.data
      })
    },
    getDic() {
      const vm = this
      const dicParams = [{
        type: 'transport',
        key: 'issignContract',
        name: '运输方式'
      },
      {
        type: 'port',
        key: 'departureData',
        name: '起运港'
      },
      {
        type: 'destination',
        key: 'destineData',
        name: '目的港'
      },
      {
        type: 'load_type',
        key: 'cabinetData',
        name: '拼柜类型'
      },
      {
        type: 'cabinet_type',
        key: 'cabinetList',
        name: '柜型'
      }]
      const promiseArr = dicParams.map((e) => {
        return new Promise((resolve, reject) => {
          vm.$cache.getDic(e.type)
            .then((res) => {
              resolve({
                data: res,
                key: e.key
              })
            })
            .catch((err) => {
              reject(err)
            })
        })
      })
      Promise.all(promiseArr).then((res) => {
        res.forEach((e) => {
          vm[e.key] = e.data
        })
      })
    },
    // 显示
    show({ id }) {
      const vm = this
      vm.id = id
      vm.visible = true
      vm.getInfo()
    },
    // 获取详情
    getInfo() {
      const vm = this
      vm.loading = true
      vm.$http
        .get(`/transhipment-order/${vm.id}`)
        .then((res) => {
          vm.info = res.data
          vm.loading = false
        })
        .catch(() => {
          vm.loading = false
        })
    },
    // 取消
    cancel() {
      const vm = this
      vm.info = {}
      vm.visible = false
    }
  }
}
</script>

<style lang="scss" scoped></style>
